<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.value"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form> -->
    </el-col>
    <el-col :span="24" style="text-align: left"> 
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column prop="id" label="id"></el-table-column> -->
        <el-table-column prop="code" label="卡号"></el-table-column>
        <!-- <el-table-column prop="userName" label="充值者"></el-table-column> -->
        <!-- <el-table-column prop="validityStart" label="有效开始时间"></el-table-column> -->
        <!-- <el-table-column prop="validityEnd" label="有效结束时间"></el-table-column> -->
        <el-table-column label="充值类型"> 
           <template slot-scope="scope">{{ scope.row.validity| formatCycle}}</template>
        </el-table-column>
        <el-table-column  label="充值时间">
           <template slot-scope="scope">{{ scope.row.useTime |dateFormat}}</template>
        </el-table-column> 
      </el-table>
      <div class="pagination"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </el-col>
  </el-row>
</template>
<script>
import { cardList } from "@/api/service";
export default {
  data() {
    return {
      formInline: {
        value: "",
      },
      pageInfo: {
        currentPage: 1,
        size: 15,
        total: 0,
      },
      tableData: [],
      multipleSelection: [],
    };
  },
  filters: { 
     dateFormat:(args)=>{  
          let fmt="YYYY-mm-dd HH:MM:SS"
          let ret;   
          if(args){ 
            let  date=new Date(args)
               const opt = {
              "Y+": date.getFullYear().toString(),        // 年
              "m+": (date.getMonth() + 1).toString(),     // 月
              "d+": date.getDate().toString(),            // 日
              "H+": date.getHours().toString(),           // 时
              "M+": date.getMinutes().toString(),         // 分
              "S+": date.getSeconds().toString()          // 秒 
          };
          for (let k in opt) {
              ret = new RegExp("(" + k + ")").exec(fmt);
              if (ret) {
                  fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
              };
          };
          return fmt;
          }else{
            return "";
          }
         
      },
    formatCycle:value=>{//86400
      if(value==604800){
        return "周卡";
      }else if(value==1296000){
        return "半月卡";
      }else if(value==2678400){
        return "月卡";
      }else if(value==8035200){
        return "季度卡";
      }else if(value==15984000){
        return "半年卡";
      }else if(value==31536000){
        return "年卡";
      }else{
        return "其他";
      }
    }
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      cardList({page:this.pageInfo.currentPage,size:this.pageInfo.size},'me').then((res) => {
        this.tableData = res.data.content;
        this.pageInfo.currentPage = res.data.page;
        this.pageInfo.total = res.data.total;
        this.pageInfo.size = res.data.size;
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      console.log(row);
    }, 
    handleSizeChange(val) {
      this.pageinfo.size=val; 
    },
    handleCurrentChange(val) {
     this.pageinfo.currentPage=val; 
    },
  },

};
</script>
<style lang="less" scoped>
.demo-form-inline {
  text-align: left;
}
.pagination {
  margin: 15px auto;
}
</style>
